/* eslint-disable @typescript-eslint/prefer-optional-chain */
/* eslint-disable @typescript-eslint/comma-spacing */
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable react/no-children-prop */
import React, { FC, useEffect, useState } from 'react'
import style from '@/style/index.module.scss'
import http from '@/api/request'
// import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism'
import { useLocation } from 'react-router-dom'
import MarkdownNavbar from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import { Anchor ,Image } from 'antd'
import { useTranslation } from 'react-i18next'
const Detail: FC = () => {
  const location: any = useLocation()
  console.log(location)
  const [data, setData]: any = useState([])
  const [topData,setTop]: any = useState([])
  const { t } = useTranslation()
  useEffect(() => {
    void http.post('/wipi/api/article/' + location.state.id + '/views').then(res => {
      setData(res.data)
      // console.log(res.data)
    })
    void http.get('/wipi/api/article/recommend').then(res => {
      setTop(res.data)
      console.log(res.data)
    })
  }, [])
  return <div className={style.detail}>
      <div className={style.detailleft}>
        <Image width={'700px'} height={'auto'} src={data.cover} />
      <ReactMarkdown
    children={data.content
    }
    components={{
      code ({ node, inline, className, children, ...props }) {
        const match = /language-(\w+)/.exec(className || '')
        return !inline && (match != null)
          ? (
          <SyntaxHighlighter
            children={String(children).replace(/\n$/, '')}
            style={dark as any}
            language={match[1]}
            PreTag="div"
            {...props}
          />
            )
          : (
          <code className={className} {...props}>
            {children}
          </code>
            )
      }
    }}
  />
      </div>

      <div className={style.detailright}>
         <Anchor>
          <div className={style.detailtop}>
            <h3>{t('RecommendedReadings')}</h3>
             {
              topData && topData.map((item: any, index: number) => {
                return <li key={index}>
                    {item.title}
                </li>
              })
             }
          </div>
          <div className={style.detailbot}>
          <h3>{t('Toc')}</h3>
          <MarkdownNavbar source={data.content} />
          </div>
          </Anchor>
      </div>

  </div>
}

export default Detail
